/* Copyright (c) 2012 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

/* Special attribute to hide elements. */
[hidden] {
  display: none !important;
}

cr-button {
  --active-bg: none;  /* prevent dark-mode activation color */
  box-shadow: none;
}

/* "chrome-menu" class overrides some standard menu.css styles, to make custom
   menus in FileBrowser look like native ChromeOS menus. */

cr-menu.chrome-menu {
  background-color: var(--cros-bg-color-elevation-2);
  border-radius: 4px;
  box-shadow: var(--cros-elevation-2-shadow);
  color: var(--cros-menu-label-color);
  outline: none;
  overflow: hidden;
  padding: 8px 0;
  transition: opacity 200ms ease-in;
  z-index: 600;  /* Must be below the overlay pane (1000). */
}

cr-menu.chrome-menu[hidden] {
  display: block !important;  /* Overrides default [hidden] for animation. */
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

cr-menu.chrome-menu.hide-delayed[hidden] {
  transition-delay: 120ms;
  transition-property: opacity, visibility;
}

cr-menu.chrome-menu > :not(hr) {
  background-position: right 10px center;
  background-repeat: no-repeat;
  line-height: 32px;
  outline: none;
  padding: 0 8px;
}

html[dir='rtl'] cr-menu.chrome-menu > :not(hr) {
  background-position: left 10px center;
}

cr-menu.chrome-menu > .menuitem-button {
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgb(235, 235, 235);
  height: 42px;
  margin: -36px -1px -1px 0;
  min-width: 60px;
  padding: 0;
  position: absolute;
  width: 60px;
}

cr-menu.chrome-menu > .menuitem-button[checked] {
  background-color: rgb(235, 235, 235);
}

cr-menu.chrome-menu > .menuitem-button.left {
  right: 59px;
}

html[dir='rtl'] cr-menu.chrome-menu > .menuitem-button.left {
  left: 59px;
  right: auto;
}

cr-menu.chrome-menu > .menuitem-button.right {
  right: 0;
}

html[dir='rtl'] cr-menu.chrome-menu > .menuitem-button.right {
  left: 0;
  right: auto;
}

cr-menu.chrome-menu > cr-menu-item[disabled] {
  color: var(--cros-text-color-disabled);
  pointer-events: none;
}

cr-menu.chrome-menu > cr-menu-item#volume-space-info[disabled] {
  color: inherit;
  pointer-events: none;
}

cr-menu.chrome-menu > cr-menu-item[disabled] > .icon.start {
  opacity: 0.20;
}

cr-menu.chrome-menu > cr-menu-item:not([disabled])[selected],
cr-menu.chrome-menu > cr-menu-item:not([disabled]):active {
  background-color: rgba(0, 0, 0, 0.08);
}

cr-menu.chrome-menu > hr {
  background: var(--cros-separator-color);
  height: 1px;
  margin: 4px 0;
}

cr-menu.chrome-menu > hr:first-child {
  display: none;
}

cr-menu.chrome-menu > cr-menu-item[checked]::after {
  -webkit-mask-image: url(../images/common/ic_selected.svg);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  background-color: var(--cros-icon-color-prominent);
  content: '';
  float: right;
  height: 32px;
  width: 20px;
}

html[dir='rtl'] cr-menu.chrome-menu > cr-menu-item[checked]::after {
  float: left;
}

cr-menu.chrome-menu > [checked]::before {
  display: none;
}

/* Style for <button>s to have similar style with Polymer's <paper-button>. */
.imitate-paper-button {
  background: transparent;
  border: 0;
  border-image: none;
  border-radius: 3px;
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  display: inline-block;
  font: inherit;
  height: auto;
  margin: 0 0.29em;
  min-width: 5.14em;
  outline: none;
  overflow: hidden;
  padding: 0.6em 0.57em;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  user-select: none;
  z-index: 0;
}

.cr-dialog-container.files-ng .cr-dialog-buttons > button {
  background-color: var(--cros-button-background-color-secondary);
  border: 0;
  border-radius: 4px;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  height: var(--cr-button-height);
  margin: 0;
  margin-inline-start: 8px;
  min-height: 32px;
  min-width: 5.14em;
  outline: none;
  padding: 8px 16px;
  position: relative;
  text-align: center;
  user-select: none;
  z-index: 0;
}

.cr-dialog-container.files-ng .cr-dialog-buttons > button.cr-dialog-ok,
.cr-dialog-container.files-ng .cr-dialog-buttons > button.cr-dialog-ok:hover {
  background-color: var(--cros-button-background-color-primary);
  color: var(--cros-button-label-color-primary);
  order: 1;
}

.cr-dialog-container.files-ng .cr-dialog-buttons > button.cr-dialog-ok:hover {
  background: var(--cros-button-background-color-primary-hover-preblended);
}

.cr-dialog-container.files-ng .cr-dialog-buttons > button.cr-dialog-ok:active {
  box-shadow: 0 1px 2px var(--cros-button-active-shadow-color-key-primary),
              0 1px 3px var(--cros-button-active-shadow-color-ambient-primary);
}

.cr-dialog-container.files-ng .cr-dialog-buttons > button.cr-dialog-ok[disabled],
.cr-dialog-container.files-ng .cr-dialog-buttons > button.cr-dialog-ok[disabled]:hover {
  background-color:
      var(--cros-button-background-color-primary-disabled);
  color: var(--cros-button-label-color-primary-disabled);
}

.cr-dialog-container.files-ng .cr-dialog-buttons > button.cr-dialog-cancel {
  border: 1px solid var(--cros-button-stroke-color-secondary);
  color: var(--cros-button-label-color-secondary);
  order: 0;
}

.cr-dialog-container.files-ng .cr-dialog-buttons > button.cr-dialog-cancel:hover {
  background: var(--cros-button-background-color-secondary-hover);
}

.cr-dialog-container.files-ng .cr-dialog-buttons > button.cr-dialog-cancel:active {
  box-shadow: 0 1px 2px var(--cros-button-active-shadow-color-key-secondary),
              0 1px 3px var(--cros-button-active-shadow-color-ambient-secondary);
}

.cr-dialog-container.files-ng .cr-dialog-buttons > button.cr-dialog-cancel[disabled],
.cr-dialog-container.files-ng .cr-dialog-buttons > button.cr-dialog-cancel[disabled]:hover  {
  border: 1px solid var(--cros-button-stroke-color-secondary-disabled);
  color: var(--cros-button-label-color-secondary-disabled);
}

:root.focus-outline-visible .cr-dialog-container.files-ng .cr-dialog-buttons > button:not(:active):focus,
:host-context(:root.focus-outline-visible) .cr-dialog-container.files-ng .cr-dialog-buttons > button:not(:active):focus {
  outline: 2px solid var(--cros-focus-ring-color);
  outline-offset: 2px;
}

/* Some files confirm dialogs need to focus their 'Cancel' button by default,
   rather than the 'OK' button. The dialog buttons should have focus rings in
   this case (regardless of mouse, pointer, keyboard interaction). */
.cr-dialog-container.files-ng .cr-dialog-frame.files-confirm-dialog-cancel-default .cr-dialog-buttons > button:not(:active):focus {
  outline: 2px solid var(--cros-focus-ring-color);
  outline-offset: 2px;
}

.buttonbar button {
  margin-inline-start: 12px;
}

/* Gray progress bar. Background color google grey 700 with 30% opacity */
.progress-bar {
  /* TODO(crbug.com/1212771): Update when semantic color is available. */
  background-color: rgba(95, 104, 106, .3);
  border-radius: 3px;
  height: 6px;
}

.progress-track {
  background-color: var(--cros-icon-color-primary);
  border-radius: 3px;
  height: 6px;
  min-width: 6px;
}

/* Entry names (File names, Folder names, Volume names, ...). */
/* Their base bidi direction should be ltr even in RTL languages. */
html[dir='rtl'] .entry-name {
  direction: ltr;
  text-align: right;  /* csschecker-disable-line left-right */
  unicode-bidi: embed;
}

/* Pop-up dialogs. */
.cr-dialog-container.files-ng.shown {
  background-color: var(--cros-app-shield-60);
}

.cr-dialog-container.files-ng {
  display: flex;
  height: 100%;
  left: 0;
  overflow: auto;
  position: absolute;
  top: 0;
  user-select: none;
  width: 100%;
  z-index: 9999;
}

.cr-dialog-container.files-ng .cr-dialog-frame {
  background-color: var(--cros-bg-color-elevation-3);
  border-radius: 12px;
  box-shadow: var(--cros-elevation-3-shadow);
  color: var(--cros-text-color-primary);
  cursor: default;
  display: flex;
  flex-direction: column;
  margin: auto;
  /* Narrower when viewport is too narrow. */
  max-width: min(512px - 24px - 24px, 75vw);
  min-width: calc(320px - 24px - 24px);
  padding: 24px;
  padding-bottom: 20px;
  position: relative;
}

.cr-dialog-container.files-ng .cr-dialog-frame:focus {
  outline: none;
}

@keyframes pulse {
 0% {
   transform: scale(1);
 }
 40% {
   transform: scale(1.02);
  }
 60% {
   transform: scale(1.02);
  }
 100% {
   transform: scale(1);
 }
}

.cr-dialog-container.pulse {
  animation-duration: 180ms;
  animation-iteration-count: 1;
  animation-name: pulse;
  animation-timing-function: ease-in-out;
}

.cr-dialog-container.files-ng.shown > .cr-dialog-frame {
  opacity: 1;
}

.cr-dialog-container.files-ng .cr-dialog-frame {
  opacity: 0;
  transition: opacity 100ms;
}

.cr-dialog-container.files-ng .cr-dialog-title {
  color: var(--cros-text-color-primary);
  display: block;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}

.cr-dialog-container.files-ng .cr-dialog-text {
  font-size: 14px;
}

.cr-dialog-container.files-ng .cr-dialog-text,
.cr-dialog-container.files-ng .cr-dialog-title {
  overflow-wrap: break-word;
}

.cr-dialog-container.files-ng .cr-dialog-text {
  color: var(--cros-text-color-secondary);
}

.cr-dialog-container.files-ng .no-title .cr-dialog-text {
  color: var(--cros-text-color-primary);
}

.cr-dialog-container.files-ng .cr-dialog-buttons {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding-top: 32px;
}

.cr-dialog-container.files-ng .cr-dialog-close {
  display: none;
}

.cr-dialog-container.files-ng #suggest-app-dialog .cr-dialog-close,
.cr-dialog-container.files-ng #default-task-dialog .cr-dialog-close {
  -webkit-mask-image: url(../images/common/ic_close.svg);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  background-color: var(--cros-icon-color-primary);
  cursor: pointer;
  display: inline-block;
  height: 32px;
  position: absolute;
  right: 6px;
  top: 6px;
  width: 32px;
}

:root[dir='rtl'] .cr-dialog-container.files-ng .cr-dialog-close,
:host-context(:root[dir='rtl']) .cr-dialog-container.files-ng .cr-dialog-close {
  left: 6px;
  right: unset !important;
}

/* Modal <dialog> container for Pop-up dialogs. */
#files-app-modal-dialog {
  background-color: transparent;
  border: none;
  height: 100%;
  margin: 0;
  max-height: initial;
  max-width: initial;
  outline: none;
  overflow: hidden;
  padding: 0;
  width: 100%;
}

/* Minor tweak of vertical position for texts which need to be vertically
 * aligned with corresponding file-type icons. */
.tree-row > .label,
.table-row-cell .filename-label,
.table-row-cell .size,
.table-row-cell .type,
.table-row-cell .date,
.thumbnail-bottom .filename-label,
.autocomplete-suggestions > li > .detail-text {
  padding-top: 1px;
}

@media (-webkit-min-device-pixel-ratio: 1.5) {
  .tree-row > .label,
  .table-row-cell .filename-label,
  .table-row-cell .size,
  .table-row-cell .type,
  .table-row-cell .date,
  .thumbnail-bottom .filename-label,
  .autocomplete-suggestions > li > .detail-text {
    /* In HiDPI display, 13pt Roboto font is drawn upper than normal display,
     * so add extra padding on top of it. */
    padding-top: 3px;
  }
}

/* Common typography styles for ChromeOS. */
body.files-ng .headline2 {
  color: var(--cros-text-color-primary);
  font-family: Roboto;
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
}

body.files-ng .button2 {
  color: var(--cros-text-color-primary);
  font-family: Roboto;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}

body.files-ng .body2-primary {
  color: var(--cros-text-color-primary);
  font-family: Roboto;
  font-size: 13px;
  line-height: 20px;
}

body.files-ng .annotation1-primary {
  color: var(--cros-text-color-primary);
  font-family: Roboto;
  font-size: 12px;
  line-height: 18px;
}

 /* Modification to cr-button to comply with ChromeOS GM2 rules. */
body.files-ng cr-button.text-button {
  color: var(--google-blue-600);
  cursor: pointer;
  font-family: Roboto;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}

body.files-ng cr-button.text-button:focus {
  outline-color: rgba(var(--google-blue-600-rgb), 40%);
  outline-width: 2px;
}
